<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>{{Config::get('app.title')}}</title>
<link rel="Shortcut Icon" href="/h/sougou/images/favicon.ico"/>
<link rel="Bookmark" href="/h/sougou/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="/h/login/css/style.css" tppabs="css/style.css" />
<style>
body{height:100%;background: #fff url(../images/2.jpg) 50% 0 no-repeat;overflow:hidden;}
canvas{z-index:-1;position:absolute;}
</style>
<script type="text/javascript" src="/h/js/jquery-1.8.3.min.js"></script>
<!-- <script src="/h/login/js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script> -->
<script src="/h/login/js/Particleground.js" tppabs="js/Particleground.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<link href="/h/css/login2.css" rel="stylesheet" type="text/css" />

<style type="text/css" rel="stylesheet">
        #register_box{
            width:400px;
            height:100px;
            background-color:#ccc;
            margin:auto;
            background-color: #fdeaea !important;
            color: #ca6f74 !important;S
            border: 1px solid #f27b81 !important;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: rgb(242, 123, 129);
            border-right-color: rgb(242, 123, 129);
            border-bottom-color: rgb(242, 123, 129);
            border-left-color: rgb(242, 123, 129);
            border-image-source: none;
            border-image-slice: 100%;
            border-image-width: 1;
            border-image-outset: 0;
            border-image-repeat: stretch stretch;
        }
        #register_box ul li{
            margin-top:7px;
            font-size:12px;
        }
    </style>
<script>
$(document).ready(function() {
  //粒子背景特效
  $('body').particleground({
    dotColor: '#5cbdaa',
    lineColor: '#5cbdaa'
  });
  //验证码
  createCode();
  //测试提交，对接程序删除即可
  $(".submit_btn").click(function(){
      location.href="javascrpt:;"/*tpa=http://***index.html*/;
      });
});
</script>

</head>
<body>


@if (count($errors) > 0)
                <div id="register_box">
                <!-- <button type="button" class="close" data-dismiss="alert">×</button> -->
                    <ul>
                        @if(is_object($errors))
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        @else
                            <li>{{ $errors }}</li>
                        @endif
                    </ul>
                </div>
@endif

<div class="login" style="margin-top:50px;">

    <div class="header">
        <div class="switch" id="switch">
            <a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
            <a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a>
            <div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
        </div>
    </div>


    <div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">


            <!--登录-->
            <div class="web_login" id="web_login">


               <div class="login-box">


            <div class="login_form">
                <form action="/home" name="loginform" accept-charset="utf-8" id="login_form" class="loginForm" method="post" onsubmit="return true">
                {{ csrf_field() }}
                <input type="hidden" name="did" value="0"/>
               <input type="hidden" name="to" value="log"/>
                <div class="uinArea" id="uinArea">
                <label class="input-tips" for="u">帐号：</label>
                <div class="inputOuter" id="uArea">

                    <input type="text" id="us" name="username" class="inputstyle"/>
                    <span id="pan1"></span>
                </div>
                </div>
                <div class="pwdArea" id="pwdArea">
               <label class="input-tips" for="p">密码：</label>
               <div class="inputOuter" id="pArea">

                    <input type="password" id="ps" name="password" class="inputstyle"/>
                    <span id="pan2"></span>
                </div>
                </div>

                <div style="padding-left:50px;margin-top:20px;">
                    <input type="submit" value="登 录" style="width:150px;" class="button_blue" id="login"/>

                </div>

              </form>
           </div>

                </div>

            </div>
            <span ><a href="/home/forget_pass" style="color:red;">忘记密码?</a></span>
            <!--登录end-->
  </div>



            <script>
                var myform1=document.getElementById('login_form');
                //给登录表单加提示
                var us=document.getElementById('us');
                var ps=document.getElementById('ps');
                var pan1=document.getElementById('pan1');
                var pan2=document.getElementById('pan2');
                    var isname=false;
                    var ispass=false;

                //登录表单验证
                    // myform1.onsubmit=function(){

                    us.onfocus=function(){
                        pan1.innerHTML = '<font style="color:#ccc;">请输入4-16字母 数字 下划线组合</font>';
                    }
                     us.onblur=function()
                    {
                        pan1.innerHTML ='';
                        //  Ajax().get('/dluser',function(msg){
                        //     alert(1)
                        // }
                        // if(msg == 1){
                        //     span[0].innerHTML = '<font color="red">用户名已存在</font>';
                        // }else{
                        //     span[0].innerHTML = '<font color="green">✔</font>';
                        // }
                        $.get('/dluser',{'username':$('#us').val()},function(msg){
                            if(msg == 0)
                            {
                                pan1.innerHTML = '<font style="color:#81f531;">用户名正确</font>';
                                us.style.border="1px solid #ccc";
                                isname=true;
                            }else if(msg == 1){
                                pan1.innerHTML = '<font style="color:red;">用户账号已冻结！</font>';
                                us.style.border="2px solid red";
                                isname=false;
                            }else{
                                pan1.innerHTML = '<font style="color:red;">用户名不存在</font>';
                                us.style.border="2px solid red";
                                isname=false;
                            }
                        })
                   }

                     ps.onfocus=function(){
                        pan2.innerHTML = '<font style="color:#ccc;">请输入4-16字母 数字 下划线组合</font>';
                    }
                     ps.onblur=function()
                    {
                        pan2.innerHTML ='';
                        $.get('/dlpass',{'username':$('#us').val(),'password':$('#ps').val()},function(msg){
                            if(msg == 0)
                            {
                                pan2.innerHTML = '<font style="color:#81f531;">密码正确</font>';
                                ps.style.border="1px solid #ccc";
                                ispass=true;
                            }else{
                                pan2.innerHTML = '<font style="color:red;">密码不正确</font>';
                                ps.style.border="2px solid red";
                                ispass=false;
                            }
                        })
                    }


              //       if(isname && ispass)
              //       {
              //           return true;
              //       }
              //     return false;
              // }
            </script>






  <!--注册-->
    <div class="qlogin" id="qlogin" style="display: none; ">

    <div class="web_login">
    <form name="form2" accept-charset="utf-8"  action="/home/register" method="post" id="myform">
        {{ csrf_field() }}
          <input type="hidden" name="to" value="reg"/>
                           <input type="hidden" name="did" value="0"/>
        <ul class="reg_form" id="reg-ul">
                <div id="userCue" class="cue">快速注册请注意格式</div>
                <li>

                    <label for="username"  class="input-tips2">用户名：</label>
                    <div class="inputOuter2">
                        <input type="text" id="username" name="username" maxlength="16" class="inputstyle2"/>
                        <span id="span1"></span>
                    </div>

                </li>

                <li>
                <label for="password" class="input-tips2">密码：</label>
                    <div class="inputOuter2">
                        <input type="password" id="password"  name="password" maxlength="16" class="inputstyle2"/>
                        <span id="span2"></span>
                    </div>

                </li>
                <li>
                <label for="passwd2" class="input-tips2">确认密码：</label>
                    <div class="inputOuter2">
                        <input type="password" id="passwd2" name="repass" maxlength="16" class="inputstyle2" />
                        <span id="span3"></span>
                    </div>

                </li>

                <li>
                 <label for="phone" class="input-tips2">手机：</label>
                    <div class="inputOuter2">

                        <input type="text" id="phone" name="phone" maxlength="11" class="inputstyle2"/>
                        <span id="span4"></span>
                    </div>

                </li>


                <li>
                 <label for="phonecode" class="input-tips2">验证码：</label>
                    <div class="inputOuter2">

                        <input type="text" id="code" name="phonecode" maxlength="10" class="inputstyle2" style="width:108px;">
                        <a href="javascript:void(0);" onClick="sendMobileCode();" id="sendMobileCode"><input type="button"  style="width:80px;height:35.5px;" value="获取验证码"></a>
                        <span id="span5"></span>
                    </div>

                </li>
                <li>
                 <label for="phone" class="input-tips2">邮箱：</label>
                    <div class="inputOuter2">

                        <input type="text" id="email" name="email" maxlength="30" class="inputstyle2"/>
                        <span id="span4"></span>
                    </div>

                </li>
                    <script>
                    //发送手机验证码
                    function sendMobileCode(){
                        $.get('/phoneCode',{'phone':$('#phone').val()},function(msg){
                            if(msg == 2){
                                alert('提交成功');
                            }else if(msg==1)
                            {
                                alert('1分钟内不能重复提交');
                            }else{
                                alert(msg);
                            }
                        });
                    }


                    $('#switch_qlogin').click(function(){
                        $('#switch_login').removeClass("switch_btn_focus").addClass('switch_btn');
                        $('#switch_qlogin').removeClass("switch_btn").addClass('switch_btn_focus');
                        $('#switch_bottom').animate({left:'0px',width:'70px'});
                        $('#qlogin').css('display','none');
                        $('#web_qr_login').css('display','block');

                    });
                    $('#switch_login').click(function(){

                        $('#switch_login').removeClass("switch_btn").addClass('switch_btn_focus');
                        $('#switch_qlogin').removeClass("switch_btn_focus").addClass('switch_btn');
                        $('#switch_bottom').animate({left:'154px',width:'70px'});

                        $('#qlogin').css('display','block');
                        $('#web_qr_login').css('display','none');
                    });

                    </script>
                <li>
                    <div class="inputArea">
                        <input type="submit" style="margin-top:10px;margin-left:85px;" class="button_blue" value="同意协议并注册"/>
                    </div>

                </li><div class="cl"></div>
            </ul>
            </form>
    </div>


    </div>
    <!--注册end-->
</div>










            <script type="text/javascript">




                //给zhuce表单加提示
                var span1=document.getElementById('span1');
                var span2=document.getElementById('span2');
                var span3=document.getElementById('span3');
                var span4=document.getElementById('span4');
                var span5=document.getElementById('span5');
                var username=document.getElementById('username');
                var password=document.getElementById('password');
                var passwd2=document.getElementById('passwd2');
                var phone=document.getElementById('phone');
                var code=document.getElementById('code');
                var myform= document.getElementById('myform');
                 var isusername=false;
                var ispassword=false;
                var isphone=false;




               //注册表单验证

                    //用户名验证
                    username.onfocus=function(){
                        span1.innerHTML = '<font style="color:#ccc;">请输入4-16字母 数字 下划线组合</font>';
                    }

                    username.onblur=function(){
                        span1.innerHTML = '';

                        //发送ajax到Register控制器chaxun方法去查询是否存在用户名
                        $.get('/yzuser',{'username':$('#username').val()},function(msg){
                           if(msg == 0)
                           {
                            span1.innerHTML = '<font style="color:red;">用户名已存在</font>';
                            username.style.border = '2px solid red';
                           }else{

                                username.style.border = '1px solid #ccc';
                           }
                        });
                        //正则验证用户名是否可用
                         var username1=/^\w{4,16}$/;
                         var u=$('#username').val();
                        if(username1.test(u))
                        {
                            span1.innerHTML = '<font color="#81f531">恭喜可用</font>';
                             isusername = true;
                        }else{
                            span1.innerHTML = '<font color="red">用户名格式不正确</font>';
                             isusername = false;
                        }

                    }

                    //密码验证
                    password.onfocus=function(){
                        span2.innerHTML = '<font style="color:#ccc;">请输入6-16字母 数字 下划线组合的密码</font>';
                    }
                    password.onblur=function(){
                        span2.innerHTML = '';

                        //正则验证密码是否可用
                         var password1=/^\w{6,16}$/;
                         var u=$('#password').val();
                        if(password1.test(u))
                        {
                            span2.innerHTML = '<font color="#81f531">恭喜可用</font>';
                             ispassword=true;
                        }else{
                            span2.innerHTML = '<font color="red">密码格式不正确</font>';
                             ispassword=false;
                        }
                    }

                    //确认密码验证
                    passwd2.onfocus=function(){
                        span3.innerHTML = '<font style="color:#ccc;">请确认密码</font>';
                    }
                    passwd2.onblur=function(){
                        span3.innerHTML = '';
                        var u=$('#password').val();
                        var uu=$('#passwd2').val();
                        if(u != uu)
                        {
                            span3.innerHTML = '<font style="color:red;">两次密码输入不一致</font>';
                        }
                    }

                    //手机号验证
                    phone.onfocus=function(){
                        span4.innerHTML = '<font style="color:#ccc;">请输入11位手机号</font>';
                    }

                    phone.onblur=function(){
                        span4.innerHTML = '';
                            $.get('/yzphone',{'phone':$("#phone").val()},function(msg){
                                if(msg == 0)
                               {
                                span4.innerHTML = '<font style="color:red;">手机号已存在请重新输入</font>';
                                phone.style.border = '2px solid red';
                                }else{
                                    phone.style.border = '1px solid #ccc';
                                }
                            })

                        //正则验证手机号
                        var phone1=/^1[3|5|7|8]\d{9}$/;
                        var pp=$('#phone').val();
                            if(phone1.test(pp))
                           {
                                span4.innerHTML = '<font color="#81f531">手机号可用</font>';
                                 isphone=true;
                            }else{
                                span4.innerHTML = '<font color="red">手机号格式不正确</font>';
                                 isphone=false;
                            }
                    }

                    //验证码验证
                    code.onfocus=function(){
                        span5.innerHTML = '<font style="color:#ccc;">请点击获取输入验证码</font>';
                    }
                    code.onblur=function(){
                        span5.innerHTML = '';
                    }

                </script>


</body>
</html>
